<template>
  <div class="nav-bar">
    <div class="nav-icon" @click="iconChange = !iconChange">
      <i class="icon" :class="{iconChange: iconChange}"></i>
    </div>
    <div class="nav">
      <div class="nav-item" v-for="(item, index) of list" :key="index">
        <span :class="{select :item.isActive}" @click="handleClickItem(index)">{{ item.label }}</span>
      </div>
      <div class="nav-item-right"></div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          label: '推荐',
          isActive: true
        },
        {
          label: '手机',
          isActive: false
        },
        {
          label: '智能',
          isActive: false
        },
        {
          label: '电视',
          isActive: false
        },
        {
          label: '笔记本',
          isActive: false
        },
        {
          label: '家电',
          isActive: false
        },
        {
          label: '生活周边',
          isActive: false
        },
        {
          label: '测试',
          isActive: false
        },
        {
          label: '家电',
          isActive: false
        }
      ],
      iconChange: false
    }
  },
  methods: {
    handleClickItem(i) {
      this.list.forEach((item) => item.isActive = false)
      this.list[i].isActive = true
    }
  }
}
</script>

<style lang="scss" scope>
@import '@/assets/style.scss';
  .nav-bar {
    position: relative;
    overflow: hidden;
    .nav-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: .68rem;
      height: .55rem;
      line-height: .55rem;
      background-color: #f2f2f2;
      box-shadow: -15px 0 15px 0 #f2f2f2;
      .icon {
        display: inline-block;
        transform: rotate(0deg);
        @include icon('');
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
        vertical-align: middle;
        transition: transform .2s linear, -webkit-transform .2s linear;
      }
      .iconChange {
        transform: rotate(180deg);
      }
    }
    .nav {
      background-color: #f2f2f2;
      font-size: .26rem;
      white-space: nowrap;
      overflow-x: auto;
      .nav-item {
        display: inline-block;
        padding: 0 .25rem;
        .select {
          color: rgb(237, 91, 0);
          border-color: rgb(237, 91, 0);
        }
        span {
          color: rgb(116, 116, 116);
          border-color: rgb(242, 242, 242);
          display: inline-block;
          line-height: .55rem;
          border-bottom: 2px solid rgba(237,91,0,0);
        }
      }
      .nav-item-right {
        padding-right: .76rem;
        display: inline-block;
      }
    }
  }
  
</style>